<template>
    <div class="mod-oss__oss">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item v-for="(item,index) in pathList" :key="index">
          <a @click="breadcrumbClick(item,index)" style="user-select: none;cursor:pointer;">{{ item }}</a>
        </el-breadcrumb-item>
      </el-breadcrumb>
      <div class="file-list">
        <div class="file-list-item" v-for="(item,index) in dataList" :key="index" @click="openFolder(item.name,item.isDir)" @contextmenu.prevent.stop="rightClick($event,item.isDir?'fileDir':'file',item)">
          <div class="img" :style="'background: url('+getIconPath(item.suffix,item.isDir)+') center no-repeat;'"></div>
          <div class="file-name" :title="item.name">
            <a>{{item.name}}</a>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import { getImgBySuffix } from '@/utils/fileTypeImgData'
export default {
  data () {
    return {
      // 显示形式（可选值：list 列表、icon 图标）
      showType: '',
      pathList: ['全部文件']
    }
  },
  props: {
    dataList: {
      type: Array,
      default: () => { return [] }
    }
  },
  computed: {
    getIconPath () {
      return (suffix, isDir) => {
        const path = './static/img/oss/'
        // console.log(suffix, isDir)
        return path + getImgBySuffix(suffix, isDir)
      }
    }
  },
  methods: {
    rightClick (e, type, fileData) {
      this.$emit('rightClick', e, type, fileData)
    },
    // 点击面包屑
    breadcrumbClick (name, i) {
      const pathList = []
      this.pathList.forEach((item, index) => {
        if (i >= index) {
          pathList.push(item)
        }
      })
      this.pathList = pathList
      this.$emit('refreshDataList')
    },
    // 打开文件夹
    openFolder (name, isDir) {
      if (isDir) {
        this.pathList.push(name)
        this.$emit('refreshDataList')
      }
    }
  }
}
</script>
<style scoped>
.file-list{
width: 100%;
}
.file-list .file-list-item{
  display: inline-block;
  width: 120px;
  height: 127px;
  margin: 4px 0 0 6px;
  text-align: center;
  border: 1px solid #fff;
  position: relative;
}
.file-list .file-list-item:hover{
  background-color: #f1f5fa;
  border: 1px solid #f1f5fa;
  border-radius: 5px;
}
.file-list .file-list-item.checked{
  background-color: #f1f5fa;
  border: 1px solid #90d8ff;
  border-radius: 5px;
}
.file-list .file-list-item .img{
  position: relative;
  margin: 9px auto 0;
  width: 84px;
  height: 84px;
  background-repeat: no-repeat;
  overflow: hidden;
}
.file-list .file-list-item .file-name {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin: 6px 5px 5px;

  font-size: 12px;
  line-height: 1.5;
}
/*列表中所有a标签*/
.mod-oss__oss a{
  cursor: pointer;
  text-decoration: none;
  color: #424e67;
}
.mod-oss__oss a:hover{
  color: #09AAFF;
}
</style>
